<template>
  <div class="house">
    <div class="house-box" v-for="item in 5">
      <div class="house-top">
        <h3>家电</h3>
      </div>
      <div class="house-right">
        <a href="javascript:">热门</a>
        <a href="javascript:">电视影音</a>
      </div>
      <div class="house-list">
        <ul>
          <li v-for="item in 2">
            <a href="javascript:">
              <img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/b56fd90a60e3d9e5d87dae9fbd427ea8.jpg" />
            </a>
          </li>

        </ul>
      </div>
      <div class="house-list-product">
        <ul>
          <li v-for="item in 7">
            <div>
              <img src="//i8.mifile.cn/v1/a1/ef617fac-7489-436d-b74e-c43582f09633.jpg" />
            </div>
            <h3>小米电视4A 32英寸</h3>
            <p class="descirble">人工智能系统，高清液晶屏</p>
            <p class="price">
              <span>699元</span>
              <del>799元</del>
            </p>
          </li>
        </ul>
        <ul class="last">
          <li v-for="item in lastlist">
            <h3> {{item.lastname}}</h3>
            <p><span>{{item.lastprice}}</span></p>
            <div class="last-img">
              <img :src="item.url" />
            </div>
          </li>
        </ul>
      </div>
      <div class="houseimg">
          <img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/59e8fc8ba9718c266882719fb4bbcedd.jpg" />
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        lastlist: [{
            lastname: "小米盒子4",
            lastprice: "299元",
            url: require('@/assets/rightimg.png')
          },
          {
            lastname: "浏览更多",
            lastprice: "热门",
            url: require('@/assets/right.png')
          }
        ]
      }
    },
    components: {

    },
    methods: {

    }
  }
</script>

<style scoped="scoped">
  .house {
    width: 100%;
  }

  .house .house-box {
    position: relative;
    height: 70.5rem;
    background-color: #F5F5F5;
  }

  .house .house-box .house-top {
    position: absolute;
    left: 10.625rem;
  }

  .house .house-box .house-top h3 {
    font-size: 1.375rem;
    font-weight: 200;
    padding-top: 0.625rem;
    color: #333;
  }

  .house .house-box .house-right {
    position: absolute;
    right: 11rem;
  }

  .house .house-box .house-right a {
    display: inline-block;
    padding-top: 0.625rem;
    font-size: 1.4rem;
    margin-left: 0.5625rem;
    color: #424242;
  }

  .house .house-box .house-right a:hover {
    color: #ff6700;
    border-bottom: 2px solid #ff6700;
  }

  .house .house-box .house-list {
    position: absolute;
    top: 4.25rem;
    left: 10.625rem;
  }

  .house .house-box .house-list ul li {
    width: 19.625rem;
    height: 25rem;
    background-color: #FFFFFF;
    margin-bottom: 1.4rem;
  }

  .house .house-box .house-list ul li a {
    display: block;
    width: 19.625rem;
  }

  .house .house-box .house-list ul li a img {
    max-width: 100%;
  }

  .house .house-box .house-list-product {
    position: absolute;
    top: 4.25rem;
    left: 33rem;
  }

  .house .house-box .house-list-product ul li {
    width: 18.1rem;
    height: 25rem;
    background-color: #FFFFFF;
    float: left;
    margin-bottom: 1.5rem;
    margin-right: 0.925rem;
  }

  .house .house-box .house-list-product ul li div {
    width: 10rem;
    height: 10rem;
    margin: 0 auto;
  }

  .house .house-box .house-list-product ul li div img {
    max-width: 100%;
    padding-top: 1.65rem;
  }

  .house .house-box .house-list-product ul li h3 {
    text-align: center;
    font-weight: 400;
    color: #333;
    margin: 3rem 0 0 0;
  }

  .house .house-box .house-list-product ul li .descirble {
    text-align: center;
    color: #B0B0B0;
    margin: 0.5rem 0 0 0;
  }

  .house .house-box .house-list-product ul li .price {
    text-align: center;
    margin: 1.5rem 0 0 0;
  }

  .house .house-box .house-list-product ul li .price span {
    color: #ff6700;
  }

  .house .house-box .house-list-product ul li .price del {
    color: #B0B0B0;
  }

  .house .house-box .house-list-product .last li {
    width: 18.1rem;
    height: 11.8rem;
  }

  .house .house-box .house-list-product .last li h3 {
    text-align: left;
    margin: 3.4rem 0 0 2rem;
  }

  .house .house-box .house-list-product .last li p {
    margin: 0.8rem 0 0 2rem;
  }

  .house .house-box .house-list-product .last li p span {
    color: #FF6700;
  }

  .house .house-box .house-list-product .last li .last-img {
    width: 5rem;
    height: 5rem;
    position: relative;
    top: -4.5625rem;
    left: 3rem;
  }

  .house .house-box .house-list-product .last li .last-img img {

    max-width: 100%;
    padding: 0;
  }

  .house .house-box .houseimg {
    position: absolute;
    left: 10.625rem;
    top: 58.25rem;
    width: 97.6rem;

  }
  .house .house-box .houseimg  img{
    max-width: 100%;
  }
</style>
